<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Custom Drop Action</title>
    <link rel=stylesheet href=libs/bootstrap/css/bootstrap.css>
    <link rel=stylesheet href=libs/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css>
    <link rel=stylesheet href=src/css/graph.editor.css>
</head>
<body class="layout">
<div id="editor" data-options="region:'center'"></div>
<script src="http://demo.qunee.com/lib/qunee-min.js?v=1.8"></script>
<!-- build:js libs/js.js -->
<script src="libs/jquery.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="libs/layout.border.js"></script>
<script src="libs/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>

<!-- build:js libs/graph.editor/graph.editor.js -->
<script src="src/common/i18n.js"></script>
<script src="src/common/DomSupport.js"></script>
<script src="src/common/DragSupport.js"></script>
<script src="src/common/FileSupport.js"></script>
<script src="src/common/JSONSerializer.js"></script>
<script src="src/common/ExportPane.js"></script>
<script src="src/common/Toolbar.js"></script>
<script src="src/common/ToolBox.js?"></script>
<script src="src/common/PopupMenu.js"></script>
<script src="src/common/PropertyPane.js"></script>
<script src="src/graph.editor.js"></script>
<!-- endbuild -->
<script>

    var BarUI = function (data) {
        Q.doSuperConstructor(this, BarUI, arguments);
    }

    BarUI.prototype = {
        width: 100,
        height: 12,
        measure: function () {
            this.setMeasuredBounds(this.width, this.height);
        },
        draw: function (g, scale, selected) {
            var value = this.data * 100 | 0;
            var data = this.data;
            if (data > 1) {
                data = 1;
            } else if (data < 0) {
                data = 0;
            }
            var color;
            if (value < 40) {
                color = "#0F0";
            } else if (value < 70) {
                color = "#FF0";
            } else {
                color = "#F00";
            }
            g.fillStyle = color;
            var w = data * this.width;
            g.fillRect(0, 0, w, this.height);
            g.beginPath();
            g.strokeStyle = "#CCC";
            g.strokeRect(0, 0, this.width, this.height);
            g.fillStyle = "#555";
            g.textBaseline = "middle";
            if (value > 83) {
                g.textAlign = "right";
                g.fillText(value, this.width - 1, this.height / 2);
                return;
            }
            g.fillText(value, w + 3, this.height / 2);
        }
    }
    Q.extend(BarUI, Q.BaseUI);
    Q.BarUI = BarUI;
    Q.loadClassPath(BarUI, 'Q.BarUI');

    function CustomServerNode() {
        Q.doSuperConstructor(this, CustomServerNode, arguments);

        this.showDetail = true;
    }
    var w = 140, h = 120, r = 10;
    CustomServerNode.prototype = {
        _showDetail: true,
        iconSize: {width: 23},
        shape: Q.Shapes.getRect(-w / 2, -h / 2, w, h, r, r),
        setData: function (data) {
            data = data || {};
            this.set('name', data.name);
            this.set('icon', data.icon);
            this.set("cpu", data.cpu || 0);
            this.set("memory", data.memory || 0);
            this.set("incoming", data.incoming);
            this.set("outgoing", data.outgoing);
        },
        _defaultIcon: 'Q-node',
        _getIcon: function () {
            return this.get('icon') || 'Q-node';
        },
        setIcon: function (icon) {
            this.set('icon', icon);
            if (!this._showDetail) {
                this.image = this._getIcon();
            }
        },
        _animationIcon: 'sheep.gif',
        _oldIcon: null,
        showAnimationAlarm: function () {
            var icon = this._getIcon();
            if (icon == this._animationIcon) {
                return;
            }
            this._oldIcon = icon;
            this.setIcon(this._animationIcon);
            setTimeout(function () {
                this.resetIcon();
            }.bind(this), 3000);
        },
        resetIcon: function () {
            if (!this._oldIcon) {
                return;
            }
            this.setIcon(this._oldIcon);
        },
        _init: function () {
            var name = this.get('name');
            var icon = this._getIcon();
            var cpu = this.get('cpu') || 0;
            var memory = this.get('memory') || 0;
            var incoming = this.get('incoming') || 0;
            var outgoing = this.get('outgoing') || 0;

            var gradient = new Q.Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, ["#F4F4F4", "#FFFFFF", "#DFDFDF", "#E9E9E9"]);
            gradient.angle = Math.PI / 2;
            this.setStyle(Q.Styles.SHAPE_FILL_GRADIENT, gradient);
            this.setStyle(Q.Styles.SHAPE_STROKE, 0);
            this.setStyle(Q.Styles.SHAPE_OUTLINE, 1);
            this.setStyle(Q.Styles.SHAPE_OUTLINE_STYLE, "#C9C9C9");
            this.setStyle(Q.Styles.LAYOUT_BY_PATH, false);

            function addUIAt(node, ui, x, y, bindingProperty, value) {
                ui.syncSelection = false;
                ui.zIndex = 1;
                ui.position = {x: x, y: y};
                ui.anchorPosition = Q.Position.LEFT_TOP;
                ui.fontSize = 10;
                var binding;
                if (bindingProperty) {
                    binding = {
                        property: bindingProperty,
                        propertyType: Q.Consts.PROPERTY_TYPE_CLIENT,
                        bindingProperty: "data"
                    }
                }
                node.addUI(ui, binding);
                return ui;
            }

            var icon = new Q.ImageUI(icon);
            icon.size = this.iconSize;
            addUIAt(this, icon, 15, 12, "icon").anchorPosition = Q.Position.CENTER_MIDDLE;

            addUIAt(this, new Q.LabelUI(name), 30, 5, 'name');
            addUIAt(this, new Q.LabelUI("CPU"), 27, 47).anchorPosition = Q.Position.RIGHT_MIDDLE;
            addUIAt(this, new Q.LabelUI("MEM"), 27, 65).anchorPosition = Q.Position.RIGHT_MIDDLE;
            addUIAt(this, new BarUI(cpu), 30, 47, "cpu").anchorPosition = Q.Position.LEFT_MIDDLE;
            addUIAt(this, new BarUI(memory), 30, 65, "memory").anchorPosition = Q.Position.LEFT_MIDDLE;

            addUIAt(this, new Q.LabelUI("Incoming:"), 71, 90).anchorPosition = Q.Position.RIGHT_MIDDLE;
            addUIAt(this, new Q.LabelUI("Outgoing:"), 71, 106).anchorPosition = Q.Position.RIGHT_MIDDLE;
            var ui = addUIAt(this, new Q.LabelUI(incoming), 75, 90, "incoming");
            ui.anchorPosition = Q.Position.LEFT_MIDDLE;
            ui.color = "#C20";
            ui = addUIAt(this, new Q.LabelUI(outgoing), 75, 106, "outgoing");
            ui.anchorPosition = Q.Position.LEFT_MIDDLE;
            ui.color = "#C20";
        },
        _showDetail: null
    }
    Q.extend(CustomServerNode, Q.Node);
    window.CustomServerNode = CustomServerNode;
    Q.loadClassPath(CustomServerNode, 'CustomServerNode');


    Object.defineProperties(CustomServerNode.prototype, {
        showDetail: {
            get: function () {
                return this._showDetail;
            },
            set: function (show) {
                if (this._showDetail == show) {
                    return;
                }
                if (this._showDetail === undefined) {
                    this.set('icon', this.image);
                }
                this._showDetail = show;
                if (!this._inited) {
                    this._inited = true;
                    this._init();
                }
                this.image = show ? this.shape : this._getIcon();
                var uis = this.bindingUIs;
                if (uis) {
                    uis.forEach(function (ui) {
                        ui.ui.visible = show;
                    })
                    this.invalidate();
                }
            }
        }
    })

    Q.loadClassPath(CustomServerNode, 'CustomServerNode')

    var images = [{
        name: 'Custom Node', imageWidth: 80, images: [{icon: './images/voip_icon.png', type: 'CustomServerNode'}]
    }]

    $('#editor').graphEditor({
        images: images, callback: function (editor) {
            editor.propertyPane.register({
                group: 'VOIP',
                class: CustomServerNode,
                properties: [{name: 'tooltip', displayName: 'Tooltip'},
                    {client: 'cpu', displayName: 'CPU 0-1'},
                    {client: 'memory', displayName: 'Memory 0-1'},
                    {client: 'incoming', displayName: 'Incoming'},
                    {client: 'outgoing', displayName: 'Outgoing'}]
            })
            var graph = editor.graph;

            graph.moveToCenter();

            var node = new CustomServerNode();
            node.setData({
                cpu: 0.23, memory: 0.32, incoming: '100GB', outgoing: '200GB'
            });
            graph.addElement(node)
        }
    });
</script>
</body>
</html>